<template>
  <el-row :gutter="0">
    <el-col :span="24" class="container">
      <div class="sorry">咦~页面不见了~</div>
      <div class="go-home">
        <router-link to="/">返回首页</router-link>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
  import { onMounted } from "vue";
  import { useFlexible } from "../../hooks/UseFelixble";

  onMounted(() => {
    useFlexible().flexible(document, window);
  });
</script>

<style lang="scss" scoped>
  @use "./../../styles/variable.scss" as *;

  .container {
    width: 100%;
    height: 100vh;
    text-align: center;
    display: flex;
    flex-flow: column nowrap;
    justify-content: end;
    align-content: end;
  }

  .sorry {
    font: $bsFont;
    font-size: 0.75rem;
  }

  .go-home {
    font: $bsFont;
    font-size: 0.45rem;
    margin-top: 0.5rem;
  }

  a {
    text-decoration: none;
    color: #0b72a4;
  }
</style>
